<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Q&A</title>
</head>
<style>
    .container {
        position: relative;
        width: 500px;
        height: 500px;
        margin: 0 auto;
        background-color: pink;
    }
    
    .btns {
        padding: 150px;
    }
    
    .question {
        position: absolute;
        top: 0;
        width: 500px;
        height: 500px;
        background-color: skyblue;
        padding: 40px;
    }
    
    .question-top {
        display: flex;
        justify-content: space-between;
    }
    
    .question-mid {
        display: flex;
        margin: 20px 0;
    }
    
    .record {
        width: 200px;
        height: 300px;
        overflow: auto;
        background-color: #eee;
        position: absolute;
        top: 200px;
        left: 155px;
    }
</style>

<body>
    <div class="container">
        <div class="btns">
            <button id="start">开始答题</button>
            <button id="look">历史记录</button>
        </div>
        <div class="question" style="display: none;" id="question">
            <div class="question-top">
                <div id="countdown">倒计时: 30s</div>
                <div id="score">得分: 0</div>
            </div>

            <div class="question-mid">
                <div class="expression" id="expression"></div>
                <span>=</span>
                <input type="text" id='input'>
            </div>
            <div>
                <button id="submit">提交答案</button>
            </div>
        </div>
        <div class="record" style="display: none;" id="record">
            <div id="sum"></div>
            <div id="recordList"></div>
        </div>
    </div>
</body>
<script>
    let startBtn = document.getElementById('start');
    let lookBtn = document.getElementById('look');
    let submitBtn = document.getElementById('submit');
    let expressionDiv = document.getElementById('expression');
    let scoreDiv = document.getElementById('score');
    let input = document.getElementById('input');
    let recordDiv = document.getElementById('record');
    let sumDiv = document.getElementById('sum');
    let recordListDiv = document.getElementById('recordList');
    let time = 30; //30秒
    let timer; //定时器id
    let currentExprObj = {}; //算术对象
    let sum = 0; //总分
    let recordList = []; //历史记录
    startBtn.addEventListener('click', function(e) {
        showDiv('question', 'block');
        showDiv('record', 'none');
        countDown();
        updateExpr();
        recordList = [];
        sum = 0;
        scoreDiv.innerHTML = `得分: ${sum}`;
    })
    lookBtn.addEventListener('click', function(e) {
        showDiv('record', 'block');
        showDiv('question', 'none');

        let listDiv = '';
        recordList.forEach(element => {
            listDiv += element + '<br>';
        });
        sumDiv.innerHTML = `得分: ${sum}`;
        recordListDiv.innerHTML = listDiv;
    })
    submitBtn.addEventListener('click', function(e) {
        let tempStr = currentExprObj.expr + "=" + input.value;
        if (check(input.value, currentExprObj.sum)) {
            // console.log('加分');
            sum += 10;
            scoreDiv.innerHTML = `得分: ${sum}`;
            tempStr += '     结果:对';
        } else {
            tempStr += '     结果:错';
        }
        recordList.push(tempStr);
        updateExpr();
    })
    document.onkeydown = function(event) {
        var e = event || window.event || arguments.callee.caller.arguments[0];
        if (e && e.keyCode == 13) {
            submitBtn.click();
        }
    };


    //显示与隐藏
    function showDiv(targetId, showArg) {
        let div = document.getElementById(targetId);
        // console.log('显示隐藏从', div.style);
        div.style.display = showArg;
    }
    //定时器
    function countDown() {
        var countdown = document.getElementById("countdown");
        timer = setInterval(function() {
            time = time - 1;
            countdown.innerHTML = `倒计时: ${time}s`;
        }, 1000);
        setTimeout(() => {
            showDiv('question', 'none');
            clearInterval(timer);
            time = 30;
        }, 30 * 1000)
    }
    //获取算式
    function getExpr() {
        let n1 = parseInt(Math.random() * 100, 10);
        let n2 = parseInt(Math.random() * 100, 10);
        return {
            expr: `${n1}+${n2}`,
            sum: n1 + n2
        }
    }
    //更新算式
    function updateExpr() {
        currentExprObj = getExpr();
        expressionDiv.innerHTML = currentExprObj.expr;
        input.value = '';
        input.focus();
        // console.log('算术', currentExprObj);
    }
    //计算表达式
    function check(value, sum) {
        return Number(value) === sum;
    }
</script>

</html>